/*
 * @Author: 飞越疯人院 353362604@qq.com
 * @Date: 2022-11-01 10:11:53
 * @LastEditors: 飞越疯人院 353362604@qq.com
 * @LastEditTime: 2022-11-01 16:51:11
 * @FilePath: \adminstration\src\Common\Modal\MoreModal\DrawFence.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import { useBoolean, useEventEmitter, useRequest } from 'ahooks'
import { useEffect, useRef, useState } from 'react'
import { Initialization } from '../../Mars3d/Initialization'
import { DrawElement } from '../../Mars3d/DrawElement'
import { Button, Switch, Input } from 'antd'

import { wallList } from '../../Mars3d/style'

const { mars3d } = window

export const DrawMap = () => {
    const MapBox = useRef()
    const [Map, setMap] = useState()
    const [Gra, setGra] = useState()
    const [Lay, setLay] = useState()
    const [BaseDrawIngList, setBaseDrawIngList] = useState()
    const [DrawStart, { setFalse: HiddenStart }] = useBoolean(true)
    const [ParaState, { setTrue: ShowParameter }] = useBoolean(false)

    const [Color, setColor] = useState('#f00')

    const InitializationEvent = useEventEmitter()
    InitializationEvent.useSubscription(({ map, gra }) => {
        setMap(map)
        setGra(gra)
        const [, a, b] = map.getLayers({ basemaps: true })
        setBaseDrawIngList([a, b])
    })

    useEffect(() => {
        Initialization({ basemaps: 3 }, MapBox, InitializationEvent)
    }, [InitializationEvent])

    // 切换底图
    const BaseDrawingSwitch = e => {
        const [a, b] = BaseDrawIngList
        Map.removeLayer(e ? a : b, false)
        Map.addLayer(e ? b : a, true)
    }

    // 修改防抖
    const ModifyWait = e => {
        console.log(e)
    }
    const ColorWait = e => setColor(e)

    const StartDraw = () => {
        HiddenStart()
        // Gra.hasEdit = true
        // Gra.startDraw({
        //     type: "wall",
        //     style: wallList('电子围栏', 1, 1, 500)['wall002'].style
        // }).then(res => {
        //     ShowParameter()
        //     setLay(res)
        //     res.on(
        //         [
        //             mars3d.EventType.editStart,
        //             mars3d.EventType.editMovePoint,
        //             mars3d.EventType.editStyle,
        //             mars3d.EventType.editRemovePoint
        //         ], ({ graphic }) => ModifyWaitAsync(graphic)
        //     )
        // })
    }

    const ElementEvent = useEventEmitter()

    const SubmitDraw = () => {
        console.log('保存')
    }

    const { runAsync: ModifyWaitAsync } = useRequest(ModifyWait, { debounceWait: 300, manual: true })
    const { runAsync: ColorAsync } = useRequest(ColorWait, { throttleWait: 300, manual: true })
    return (
        <div className="DrawMap">
            <div className="Map" ref={MapBox} />
            <div className="BaseDrawIngSwitch">
                <div>切换底图</div>
                <Switch defaultChecked onChange={BaseDrawingSwitch} />
            </div>

            {DrawStart ? (
                <div className="Options">
                    <Button onClick={StartDraw}>开始绘制</Button>
                </div>
            ) : (
                <DrawElement
                    Map={Map}
                    Elements={{
                        elementType: 'wall',
                        styleName: 'wall001',
                        //   styleData:{'电子围栏', 1, 1, 500}
                    }}
                    ElementDetailsEvent={ElementEvent}
                />
            )}

            {/* {ParaState &&
                <div className='Parameter'>
                    <div>名称</div>
                    <div>视角</div>
                    <div>样式</div>
                    <div>颜色</div>
                    <Input type='color' allowClear />
                    <div>排序</div>
                    <div>状态</div>
                    <Button type='link' onClick={SubmitDraw}>保存数据</Button>
                </div>
            } */}
        </div>
    )
}
